<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>JS图片充满容器垂直水平居中剪切</title>
</head>

<body>

	<h3>使用imgFullZoom剪切后的效果</h3>
	<style>
	#imgFullZoom{height:188px;}
	#imgFullZoom .ifzItem{width:188px;height:188px;float:left;margin-right:10px;}
	</style>
	<div id="imgFullZoom">
		<div class="ifzItem"><img src="images/2.jpg"/></div>
		<div class="ifzItem"><img src="images/3.jpg"/></div>
		<div class="ifzItem"><img src="images/1.jpg"/></div>
		<div class="ifzItem"><img src="images/31.jpg"/></div>
	</div>
	<br/><br/><br/>
	<h3>原始图片大小</h3>
	
	<div class="source">
		<div><img src="images/2.jpg"/></div>
		<div><img src="images/3.jpg"/></div>
		<div><img src="images/1.jpg"/></div>
		<div><img src="images/31.jpg"/></div>
	</div>
	<br/><br/><br/>
	<h3>使用方法</h3>
	<p>
		先引用js插件
		<code>
		&lt;script src=&quot;js/im22gFullZoom.js&quot;&gt;&lt;/script&gt;
		</code>
	</p>
	<p>然后添加html结构</p>
	<p>
		<code>
			&lt;style&gt;<br/>
	#imgFullZoom{height:188px;}<br/>
	#imgFullZoom .ifzItem{width:188px;height:188px;float:left;margin-right:10px;}<br/>
	&lt;/style&gt;<br/>
		&lt;div id=&quot;imgFullZoom&quot;&gt;<br/>
		&lt;div class=&quot;ifzItem&quot;&gt;&lt;img src=&quot;...&quot;/&gt;&lt;/div&gt;<br/>
		&lt;div class=&quot;ifzItem&quot;&gt;&lt;img src=&quot;...&quot;/&gt;&lt;/div&gt;<br/>
		&lt;div class=&quot;ifzItem&quot;&gt;&lt;img src=&quot;...&quot;/&gt;&lt;/div&gt;<br/>
		&lt;div class=&quot;ifzItem&quot;&gt;&lt;img src=&quot;...&quot;/&gt;&lt;/div&gt;<br/>
	&lt;/div&gt;
		</code>
	</p>
	<p>最后调用插件即可</p>
	<p>
		<code>
		&lt;script&gt;
		imgFullZoom.init();
	&lt;/script&gt;
		</code>
	</p>
	<p>插件有两种调用方式</p>
	<p>
	第一种：
		<code>
		imgFullZoom.init();
		</code><br/>
		此方式不规定代码顺序，就是说随意写在代码开头或者结尾或者中间都可以。
		
	</p>
		<p>
	第一种：
		<code>
		imgFullZoom.main();
		</code><br/>
		此方式必须写在html结构之后，或者需要等待文档加载完成后再调用。
	</p>
	</p>
		<p>
	参数：
		<code>
		imgFullZoom.init(&quot;imgFullZoom&quot;,&quot;ifzItem&quot;);
		</code><br/>
		main方法和init方法默认有两个参数，第一个参数是包裹层对象的id，默认值是imgFullZoom，第二个是需要剪切居中的元素class，默认值是ifzItem。
	</p>
	<p><strong>注意事项</strong></p>
	<ul>
		<li>1,需要使用效果的元素必须设置宽度和高度，不然会有错误。</li>
		<li>2,自定义样式需要修改调用参数指定。</li>
	</ul>
	<script src="js/imgFullZoom.js"></script>
	<script>
		imgFullZoom.init();
	</script>
</body>
</html>